<template>
  <FormItem v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <ElTimePicker
        :is-range="range"
        :value="value"
        :disabled="inputDisabled"
        :format="format"
        :value-format="valueFormat || format"
        clearable
        :picker-options="{
          start,
          end,
          step,
          minTime,
          maxTime,
          selectableRange
        }"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :placeholder="computePlaceholder"
        v-bind="inputProps"
        v-on="listeners"
        @input="val => $emit('input', val)" />
    </template>
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import { TimePicker } from 'element-ui'
  import { filterProperties, normalizeProps } from '@/util'

  const autoBindKeys = Object.keys(TimePicker.props).filter(key => !['value', 'placeholder', 'disabled'].includes(key))

  export default {
    name: 'FormInputTime',
    mixins: [formInput],
    props: {
      range: Boolean,
      format: {
        type: String,
        default: 'HH:mm:ss'
      },
      valueFormat: String,
      start: {
        type: String,
        default: '09:00'
      },
      end: {
        type: String,
        default: '18:00'
      },
      step: {
        type: String,
        default: '00:30'
      },
      minTime: {
        type: String,
        default: '00:00'
      },
      maxTime: {
        type: String,
        default: ''
      },
      selectableRange: String
    },
    computed: {
      prefix() {
        return '请选择'
      },
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      }
    }
  }
</script>
